<script setup lang="ts">
import { LessonCourseType } from '@/enums/course'
import { getCourseTypeName } from '@/enums/enum-mapping'
import { debounce } from '@/utils/common'
import { computed, ref, watch } from 'vue'

// 定义 emit 类型
const emit = defineEmits<{
  (e: 'searchChange', payload: {
    searchText: string
    currentType: LessonCourseType
    currentDate: string | undefined
  }): void
}>()
const searchText = ref('')
const calendars = ref()
const actionSheet = ref()
const currentType = ref(LessonCourseType.ALL)
const currentDate = ref<string | undefined>()

// 课程类型列表
const list = computed(() => {
  const types = [
    { name: getCourseTypeName(LessonCourseType.ALL), value: LessonCourseType.ALL },
    { name: getCourseTypeName(LessonCourseType.EXPERIENCE), value: LessonCourseType.EXPERIENCE },
    { name: getCourseTypeName(LessonCourseType.TRAINING), value: LessonCourseType.TRAINING },
    { name: getCourseTypeName(LessonCourseType.REVIEW), value: LessonCourseType.REVIEW },
  ]

  return types.map(type => ({
    ...type,
    fontSize: '30rpx',
    color: currentType.value === type.value ? '#ffaa7f' : '#333',
  }))
})

const typeName = computed(() => {
  return list.value.find(item => item.value === currentType.value)?.name
})

function showActionSheet() {
  actionSheet.value.open()
}

function showCalendar() {
  calendars.value.open()
}

// 使用 debounce 包装 emitSearchChange
const debouncedEmitSearchChange = debounce(() => {
  emit('searchChange', {
    searchText: searchText.value,
    currentType: currentType.value,
    currentDate: currentDate.value,
  })
}, 200)

function search(value: string) {
  searchText.value = value
  debouncedEmitSearchChange()
}
function confirm(date: any) {
  currentDate.value = date.fulldate
  debouncedEmitSearchChange()
}

function select(item: any) {
  currentType.value = item.value
  debouncedEmitSearchChange()
}

// 监听搜索条件变化
watch([searchText, currentType, currentDate], () => {
  debouncedEmitSearchChange()
})
</script>

<template>
  <view class="filter-container">
    <view class="search-bar">
      <uv-search
        v-model="searchText"
        bg-color="#fff"
        :show-action="false"
        :clearabled="false"
        placeholder="请输入学员"
        @search="search"
      />
    </view>
    <view class="flex-center filter-item" @click="showCalendar">
      <text>{{ currentDate ? currentDate : '日期筛选' }}</text>
      <uni-icons class="search-icon ml-2" color="#fff" type="down" size="20rpx" />
    </view>
    <view class="flex-center filter-item" @click="showActionSheet">
      <text>{{ typeName }}</text>
      <uni-icons class="search-icon ml-2" color="#fff" type="down" size="20rpx" />
    </view>
    <uv-calendars ref="calendars" color="#43B09B" confirm-color="#43B09B" :date="currentDate" @confirm="confirm" />

    <uv-action-sheet ref="actionSheet" :actions="list" @select="select" />
  </view>
</template>

<style lang="scss" scoped>
.filter-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
    color: #fff;
    padding: 20rpx 30rpx;
    padding-right: 10rpx;
    gap: 20rpx;

    .search-bar {
        position: relative;
        width: 360rpx;

        .search-input {
            background-color: #fff;
            border-radius: 40rpx;
            padding: 20rpx 30rpx 20rpx 70rpx;
            font-size: 24rpx;
            color: #666;
        }

        .search-icon {
            position: absolute;
            left: 30rpx;
            top: 50%;
            transform: translateY(-50%);
            color: #999;
        }
    }

    .filter-item {
        font-size: 24rpx;
    }
}
</style>
